<template>
  <!--  处方审核列表-->
  <div class="container">
    <baleTable
      :tableData="tableData"
      :tableHead="tableHead"
      :isSearch="true"
      :isTableRowClick="true"
      :tableLoading="tableLoading"
      :page="page"
      @pageSizeChange="pageSizeChange"
      @handleCurrentChange="handleCurrentChange"
      @searchMethods="searchMethods"
      @tableSortChange="tableSortChange"
      @handleRowClick="handleRowClick"
      ref="baleTable"
    >
      <template #headLeft> </template>
      <template #name="{ scope }">
        {{ scope.row.patient.name }}
      </template>

      <template #medical="{ scope }">
        <div
          class="mb5"
          v-for="item in JSON.parse(scope.row.medical)"
          :key="item.id"
        >
          <el-popover trigger="hover" placement="top">
            <p>单价: {{ item.price }}</p>
            <p>药品规格: {{ item.size }}</p>
            <!--    <p>频率(次): {{item.doseFrequency }}</p>
            <p>用药天数(天): {{item.days }}</p> -->
            <p>剂量: {{ item.dosage }}{{ item.dosageUnit }}</p>
            <p>用法: {{ item.usage }}</p>
            <p>频次: {{ item.frequency }}</p>
            <p>用药天数(天): {{ item.days }}</p>
            <p>注意事项: {{item.remark }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ item.name }}*{{ item.num }}</el-tag>
            </div>
          </el-popover>
        </div>
      </template>

      <template #caozuo="{ scope }">
        <div @click.stop="">
          <el-button type="danger" size="mini" @click="showDialog(scope.row)"
            >不通过</el-button
          >
          <el-button type="primary" size="mini" @click="confirm(scope.row, '1')"
            >通过</el-button
          >
        </div>
      </template>
    </baleTable>

    <el-dialog
      :visible.sync="dialogVisible"
      width="800px"
      :before-close="handleClose"
      :close-on-click-modal="false"
      append-to-body
      title=""
      center
    >
      <el-input
        type="textarea"
        size="medium"
        v-model="not_pass_reason"
        auto-complete="off"
        placeholder="请输入原因"
        :autosize="{ minRows: 5, maxRows: 8 }"
      ></el-input>
      <div slot="footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button
          type="primary"
          @click="confirm(row, '2')"
          :loading="btnLoading"
          >确 定</el-button
        >
      </div>
      <!--  <div style="text-align: center; height: 80%">
        <img src="./1.png" alt="" srcset="" style="height: 500px" />
      </div> -->
    </el-dialog>

    <detail ref="detail" />
  </div>
</template>

<script>
import detail from "./components/detail.vue";
import { ApiGetAdviceList, ApiPostadviceReview } from "@a/index";
import { tableHead } from "./config";
import { mapState, mapGetters } from "vuex";
export default {
  name: "Prescrib111",
  components: { detail },
  data() {
    return {
      row: {},
      not_pass_reason: null,
      tableHead,
      tableData: [],
      page: {
        page: 1,
        size: 25,
        total: 0,
      },
      tableLoading: false,
      searchParams: {},
      sortParams: {},
      editFormVisible: false,
      btnLoading: false,
      order_id: "",
      dialogVisible: false,
    };
  },
  computed: {
    ...mapState(["userState"]),
  },
  created() {
    // 获取传过来的数据，并赋值给本页面中的数据
    if (this.$route.query.order_id) {
      this.order_id = this.$route.query.order_id;
      this.getList();
    }
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    //审核通过
    confirm(row, val) {
      /*    val:'1' 通过    2 不通过 not_pass_reason*/
      this.$confirm("是否确认该操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        center: true,
        type: "warning",
      })
        .then(() => {
          let query = {
            id: row.id,
            result: val,
            not_pass_reason: this.not_pass_reason,
          };
          if (val == 1) {
            delete query.not_pass_reason;
          }
          ApiPostadviceReview(query).then((res) => {
            if (res.code == 200) {
              this.$message.success("操作成功");
              this.getTableData();
              this.handleClose();
            }
          });
        })
        .catch((err) => {});
    },
    refresh() {
      this.getTableData();
    },
    showDialog(row) {
      this.row = row;
      /*   window.open(row.advice_pic); */
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    getTableData(params = {}) {
      let postParams = {
        ...params,
        ...this.searchParams,
        ...this.sortParams,
        ...this.page,
      };
      if (this.order_id) {
        postParams.order_id = this.order_id;
      }
      this.tableLoading = true;
      ApiGetAdviceList(postParams).then((res) => {
        let { data, page } = res;
        this.tableData = data;
        this.page.total = page.total;

        this.tableLoading = false;
      });
    },

    searchMethods(params) {
      this.searchParams = {};
      this.page.page = 1;
      this.searchParams = params;
      this.getTableData();
    },
    pageSizeChange(val) {
      this.page.size = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.page.page = val;
      this.getTableData();
    },
    tableSortChange(params) {
      if (params.sort_str) {
        this.sortParams = { ...this.sortParams, ...params };
      } else {
        delete this.sortParams.sort_str;
        delete this.sortParams.sort_order;
      }
      this.page.page = 1;
      this.getTableData();
    },
    handleRowClick(row) {
      this.$refs.detail.show(row.row);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-dialog {
  max-height: 90vh;
}
</style>
